<template>
  <el-header class="header">
    <h3>商家数据平台</h3>
    <div>
      <i class="el-icon-user-solid" style="color:#eee;margin-right:10px"></i>
      <el-dropdown v-if="userName!='未登录,去登录'">
        <i class="el-icon-setting" style="margin-right: 15px;"></i>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item>基本资料</el-dropdown-item>
          <el-dropdown-item>修改密码</el-dropdown-item> -->
          <el-dropdown-item>
            <span @click="goOut">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span @click="login">{{userName}}</span>
    </div>
  </el-header>
</template>
<script>
export default {
  data() {
    return {
      userName: "",
    };
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("userMsg"))) {
      this.userName = JSON.parse(sessionStorage.getItem("userMsg")).userName;
    } else {
      this.userName = "未登录,去登录";
    }
  },
  methods: {
    goOut() {
      sessionStorage.removeItem("userMsg");
      this.$router.push("/");
    },
    login() {
      this.$router.push("/");
    },
  },
};
</script>
<style scoped>
.header {
  color: white;
  background-color: rgb(21, 24, 30);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
span {
  cursor: pointer;
}
</style>